import { Component,Input,Output,EventEmitter } from '@angular/core';
import {Router} from '@angular/router'
/**
 * MusicCard 歌单卡片组件
 * @example
 * 父传子：父组件 MusicAlbumList变量 ，绑定到子组件 item变量 上
 * 子传符：子组件向父组件传递 delete edit restore 事件方法
 *  <ng-container *ngFor="let item of MusicAlbumList">
        <music-card 
          [item] = "item" 
          (delete)="deleteMusic($event)"
          (edit)="editMusic($event)"
          (restore)="deleteMusic($event,true)" >
        </music-card>
    </ng-container>
 */
@Component({
  selector: 'music-card',
  templateUrl: './music-card.component.html',
  styleUrls: ['./music-card.component.scss']
})
export class MusicCardComponent {
  @Input("item")
  /**
   * 从父组件传入的数据值
   * @type  any[]
   * @example
   * <music-card 
          [item] = "item" 
     </music-card>
   */
  item:any={}
  //EventEmitter   实现发布订阅功能
  
  /**
   * 子组件向父组件传递事件 edit  delete  restore
   */
  // 编辑
  @Output("edit")
  _edit:EventEmitter<any> = new EventEmitter()
// 删除
  @Output("delete")
  _delete:EventEmitter<any> = new EventEmitter()
// 撤回
  @Output("restore")
  _restore:EventEmitter<any> = new EventEmitter()

  constructor(private router:Router){}
  // 删除
  /**
   * 根据 item 进行删除
   */
    delete(){
      this._delete.emit(this.item)
    }
    /**
     * 根据 item.objectId 跳转到对应的编辑页面
     */
  //编辑
    edit(){
      this.router.navigate(["/music/edit"],{
        queryParams:{
          id:this.item.objectId
        }
      })
    }
     /**
   * 根据 item 进行撤回
   */
    //撤回
    restore(){
      this._restore.emit(this.item)
    }
/**
     * 根据  id:this.item.album.objectId 跳转到对应的评论页面
     */
    // 评论
    comment(){
      this.router.navigate(["music/comment"],{
        queryParams:{
          id:this.item.album.objectId
        }
      })
    }
}
